<template>
  <el-tooltip v-if="isShow" :content="tooltipText" v-bind="$attrs" v-on="$listeners">
    <div class="hg-auto-tooltip OMIT" v-auto-show-text>
      {{text}}
    </div>
  </el-tooltip>
  <div v-else><ex-text-fill :text="text" :hr="hr"></ex-text-fill></div>
</template>

<script>
export default {
  name: 'ex-auto-tooltip',
  inheritAttrs: false,
  props: {
    /**
     * 文本内容
     */
    text: {
      type: [String, Number],
      default: ''
    },
    /**
     * 文本为空时的占位符
     */
    hr: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      // 要显示的 tooltip 文本
      tooltipText: '',
      isShow: true
    }
  },
  directives: {
    'auto-show-text': {
      inserted: (el, binding, vnode) => {
        const me = vnode.context
        if (el.scrollWidth > Math.round(el.offsetWidth)) {
          me.tooltipText = me.$attrs.title || me.text
        } else {
          me.tooltipText = ''
        }
        me.isShow = !!me.tooltipText
      },
      componentUpdated (el, binding, vnode) {
        const me = vnode.context
        if (el.scrollWidth > Math.round(el.offsetWidth)) {
          me.tooltipText = me.$attrs.title || me.text
        } else {
          me.tooltipText = ''
        }
        me.isShow = !!me.tooltipText
      }
    }
  }
}
</script>
